<template>
  <div class="collect-modal">
    <div class="form-control">
      <input v-model="submitData.webSite" placeholder="站点链接" required />
    </div>
    <div class="form-control">
      <input v-model="submitData.webName" placeholder="站点名称" required />
    </div>

    <button @click="submit" class="btn">保存</button>

    <div class="error" v-if="error">
      <IconConfigProvider size="24">
        <Icon>
          <WarningAmberRound />
        </Icon>
      </IconConfigProvider>
      {{ error }}
    </div>
  </div>
</template>

<script>
import { Icon, IconConfigProvider } from "@v2icons/utils"
import { WarningAmberRound } from "@v2icons/material"
import { mapActions } from "vuex"
import { AppIdEnum } from "@/constant"
export default {
  components: {
    WarningAmberRound,
    Icon,
    IconConfigProvider
  },
  data() {
    return {
      error: "",
      submitData: {}
      // iframeSrc: ''
    }
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    data: {
      handler(obj = {}) {
        this.submitData = obj
      },
      deep: true
    }
  },
  methods: {
    ...mapActions(["saveCollect", "getCollects", "closeApp"]),
    submit() {
      this.error = ""
      this.validate()
        .then(() => {
          this.saveCollect({
            ...this.submitData,
            inDrawer: this.submitData.inDrawer || false
          }).then((result) => {
            console.log(result)
            if ("ok" === result.data.status) {
              //调用云函数
              //关闭弹框
              setTimeout(() => {
                this.closeApp(AppIdEnum.COLLECT_MODAL)

                this.getCollects()
              }, 800)
            } else {
              this.error = result.data.message
            }
          })
        })
        .catch((err) => {
          this.error = err
        })
    },
    validate() {
      const urlReg =
        /^(((https|http|ftp|):\/\/)?(www\.)?([\w_\-.]{0,61})+(\.\w{2,10})+(\/)?[\w_?@&=#\-./]{0,})|(#)$/

      return new Promise((resolve, reject) => {
        if (!this.submitData.webSite || !this.submitData.webName) {
          reject("请填写必填项")
        } else if (!urlReg.test(this.submitData.webSite)) {
          reject("网址不正确,请重新输入")
        } else {
          resolve()
        }
      })
    }
  },
  mounted() {
    if (this.data) {
      this.submitData = this.data
    }
  }
}
</script>

<style lang="less" scoped>
@primary-color: #409eff;
@second-color: #66b1ff;
.collect-modal {
  padding: 20px;
  .form-control {
    // width: 300px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .form-control label {
    font-size: 18px;
    position: absolute;
    top: 15px;
  }
  .form-control input {
    width: 100%;
    background-color: transparent;
    margin-bottom: 30px;
    border: 0;
    padding: 15px 0;
    font-size: 18px;
    border-bottom: 2px solid #fff;
    color: black;
    &::placeholder {
      color: rgba(0, 0, 0, 0.35);
    }
  }
  .form-control input:focus {
    outline: none;
    caret-color: @primary-color;
    border-bottom: 2px solid @primary-color;
  }
  .success {
  }
  .error {
    display: flex;
    border-radius: 6px;
    padding: 6px;
    align-items: center;
    border: 1px solid #ffccc7;
    font-size: 14px;
    background: #fff2f0;
    color: #ff4d4f;
  }
  .btn {
    cursor: pointer;
    width: 100%;
    height: 50px;
    margin: 30px auto;
    padding: 5px;
    border-radius: 6px;
    border: none;
    background: lightblue;
    font-size: 16px;
    color: white;
    background-color: @primary-color;
    border-color: @primary-color;
    transition: all 0.3s;
    &:hover {
      background-color: @second-color;
      border-color: @second-color;
    }
  }
}
</style>
